﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取</p>
    <div id="d1"></div>
</body>
</html>
<script type="text/jsx">
    var Input = React.createClass({
        getInitialState:function(){
            return {value:"hello"};
        },
        handleChange:function(e){
            this.setState({value:e.target.value,tag:"hhh"});
        },
        render:function(){
            var val = this.state.value;
            return (
                <div>   
                    <input type='text' value={val} onChange = {this.handleChange} />
                    <p>{val}</p>
                </div>
            );
        }
    });

    React.render(
        <Input />,$("#d1").get(0)
    );
</script>